<template>
	<div id="users-header">
		<div class="finance_title">财务</div>
		<el-tabs v-model="activeName" @tab-click="handleClick" >
			<el-tab-pane  v-for="item in finance_tabs" :key='item.index' v-bind:label="item.text" :index="item.visibled" :name="item.index"></el-tab-pane>
		</el-tabs>
	</div>
</template>
<script>
	import { mapActions, mapState, mapGetters } from 'vuex'
	export default {
		data() {
			return {
				activeName: undefined,
			}
		},
		created() {
			this.updateFinanceTab(this.current_user)
			this.activeName = this.finance_tabs[0].index
			this.handleClick({ index: 0 })
		},
		computed: {
			...mapGetters(['finance_tabs', 'current_user'])
		},
		methods: {
			...mapActions(['setFinanceTab', 'updateFinanceTab']),
			handleClick(e = {}) {
				this.setFinanceTab({ financeTab: this.activeName, financeVisi: this.finance_tabs[e.index] })
			}
		}
	}
</script>
<style lang='scss' >
	.content_box {
		padding: 40px;
		display: flex;
	}
	.finance_title {
		height: 70px;
		line-height: 70px;
		background-color: white;
		padding-left: 4%;
		font-size:20px;
		color:#1f2d3d;
	}
	/*.finance_content {
		width: 318px;
		padding: 30px;
		background: #fff;
		text-align: center;
		span {
			font-size: 14px;
			color: #5e6d82;
		}
		>div:nth-child(2) {
			margin-top: 30px;
			background: #f9fafc;
			width: 100%;
			height: 220px;
			span {
				display: block;
			}
			>span:first-child {
				padding-top: 73px;
				font-size: 30px;
				color: #31b69b;
			}
		}
	}*/
	.el-tabs__header{
		margin: 0px 0px;
		background-color: white;
		padding-left: 3%;
	}
</style>